<template>
  <!-- 新版虞豆商城 -->
  <div class="server_box " v-loading="loading">
    <div class="nav-bg" v-if="slides.length > 0">
      <div class="shangjia_box ">
        <span>选择虞都的商家:</span>
        <b>{{ totalNum }}+</b>
        <div class="shangjia_list">
          <vue-seamless-scroll :data="slides" class="warp" :class-option="defaultOption">
            <div class="flex systemNotice">
              <div class="flex new-system" v-for="item in slides" :key="item.id">
                <img :src="item.img" alt="">
                <div class="titles" v-if="(item.title && item.title.length < 4)">{{ item.title || '' }}</div>
                <div class="titles" v-else>
                  <el-tooltip class="item" :content="item.title" placement="top">
                    <div class="titles">{{ item.title || '' }}</div>
                  </el-tooltip>
                </div>

              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>

    <div class="flex activate-box">
      <!-- <div @click="foundation">333 基础服务包</div>
      <div @click="shopChange">444</div> -->
      <div class="activate-box-left">
        <!-- <img class="left-bg" src="@/assets/img/shop/left-bg-1.png" alt="背景"> -->
        <div v-if="tenantData && tenantData.baseExpireTime">
          <img v-if="tenantData.baseServer == 2" class="left-bg-st" src="@/assets/img/shop/left-bg.png" alt="背景">
          <img v-else class="left-bg-st" src="@/assets/img/shop/yes.png" alt="背景">
        </div>
        <div>
          <span class="title">基础服务包</span>
          <span class="money"><span style="font-size: 16px;font-weight: 600;margin-left: 8px;">{{ baseServerMoney
              }}</span>元/ 月</span>
          <span class="timer" v-if="tenantData && tenantData.baseExpireTime">到期时间：{{
            parseTime(tenantData.baseExpireTime, '{y}-{m}-{d}') ||null}}</span>
        </div>
        <div class="flex">
          <div class="flex-l">
            <div class="grids">
              <div class="grids-item">
                <img src="@/assets/img/shop/left-1.png" alt="">
                <span>自动获取</span>
              </div>
              <!-- <div class="grids-item">
                <img src="@/assets/img/shop/left-2.png" alt="">
                <span>API接口</span>
              </div> -->
              <div class="grids-item">
                <img src="@/assets/img/shop/left-3.png" alt="">
                <span>脚本上架</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/left-4.png" alt="">
                <span>智能卡位</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/left-5.png" alt="">
                <span>监控找回</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/left-6.png" alt="">
                <span>刷新功能</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/left-7.png" alt="">
                <span>聚合聊天</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/left-8.png" alt="">
                <span>在线客服</span>
              </div>
            </div>
          </div>
          <div class="flex-r">
            <div>
              <div class="flex-r-cont">
                 <div class="title-one">按次收费不划算?</div>
                <div class="title-two">赶紧开通基础服务包吧!</div>
                <div class="title-three">本服务<span>专为号商</span>推出</div>
                <div class="title-four">开通后包含的功能 <span>随便用!</span>  </div>
              </div>

              <!-- <img class="flex-r-p" src="@/assets/img/shop/left-9.png" alt=""> -->
              <div class="flex flex-btn" @click="foundation">
                <img class="flex-r-b" src="@/assets/img/shop/left-begin.png" alt="">
                <span v-if="tenantData && tenantData.baseExpireTime">立即续费</span>
                <span v-else>立即开通</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="activate-box-left activate-box-right">
        <!-- <img class="left-bg" src="@/assets/img/shop/right-bg.png" alt="背景"> -->
        <div v-if="tenantData && tenantData.shopExpireTime">
          <img v-if="tenantData.shopServer == 2" class="left-bg-st" src="@/assets/img/shop/left-bg.png" alt="背景">
          <img v-else class="left-bg-st" src="@/assets/img/shop/yes.png" alt="背景">
        </div>
        <div style="position: relative;z-index: 2;">
          <span class="title">自营商城包</span>
          <span class="money"><span style="font-size: 16px;font-weight: 600;margin-left: 8px;">{{ shopServerMoney
              }}</span>元/ 月</span>
          <span class="timer" v-if="tenantData && tenantData.shopExpireTime">到期时间：{{ parseTime(tenantData.shopExpireTime,
            '{y}-{m}-{d}')||null}}</span>
        </div>
        <div class="flex">
          <div class="flex-l">

            <div class="grids grids-r">
              <div class="grids-item">
                <img src="@/assets/img/shop/right-1.png" alt="">
                <span>手机网站</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/right-2.png" alt="">
                <span>PC网站</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/right-3.png" alt="">
                <span>官方代售</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/right-4.png" alt="">
                <span>商家回收</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/right-5.png" alt="">
                <span>在线支付</span>
              </div>
              <div class="grids-item">
                <img src="@/assets/img/shop/right-6.png" alt="">
                <span>中介担保</span>
              </div>

            </div>
          </div>
          <div class="flex-r" style="">
            <div>
               <div class="flex-r-cont" style="text-align: right;">
                 <div class="title-one">想做私域、想做平台?</div>
                <div class="title-two">赶紧开通自营商城吧!</div>
                <div class="title-three">本服务<span>专为想做商城和私域的号商</span>推出</div>
                <div class="title-four">开通即享受完整版自营商城,运营推广<span>随您心意!</span>  </div>
              </div>
              <!-- <img class="flex-r-r-p" src="@/assets/img/shop/right-9.png" alt=""> -->
              <div class="flex flex-btn" @click="shopChange">
                <img class="flex-r-b" src="@/assets/img/shop/left-begin.png" alt="">
                <span v-if="tenantData && !tenantData.shopExpireTime">立即开通</span>
                <span v-else>立即续费</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" v-if="menuGroupList && menuGroupList.length && serviceList && isOne">
      <div class="footer-titles">
        基础服务
      </div>
      <div class="grid">
        <div class="grid-item" v-for="(item, i) in menuGroupList" :key="i" v-if="item.category == 1">
          <!-- 是否到期 -->
        <img v-if="item.state == 1 && dayNum(item.closeTime) < 5" class="footer-img"
            src="@/assets/img/shop/open-timer.png" alt="">
          <img v-else-if="item.state == 1" class="footer-img" src="@/assets/img/shop/open.png" alt="">
          <img v-else-if="item.state == 2 && item.closeTime " class="footer-img" src="@/assets/img/shop/no-open.png" alt="">
          <div><img :src="item.titleImg || 'https://imgage.maimaihao.com/yuduhulian/zanwu.png'" alt=""></div>
          <div class="grid-cont">
            <div class="tips dess" v-if="(item.shuoming && item.shuoming.length <= 41)">
              {{ item.shuoming }}
            </div>
            <div class="tips dess" v-else-if="item.shuoming">
              <el-tooltip :content="item.shuoming" placement="top-start">
                <span>
                  {{ item.shuoming.slice(0, 41) + '...' }}
                </span>
              </el-tooltip>
            </div>
            <div class="tips dess" v-else>暂无说明</div>
            <div class="flex" style="justify-content: space-between;margin-bottom: 6px;height: 18px;">
              <div class="auto"
                v-if="((item.buyWay == 2) || (item.buyWay != 2 && item.businessId == 5492 && item.state != 1)) && item.businessId">
                <span style="font-size: 12px;color: #6c5dd3;">自动续费：</span><el-switch class="el-switch-autos"
                  @change="editAuto($event, item)" :disabled="nowDate == item.closeTime" v-model="item.isAuto"
                  :active-value="1" :inactive-value="2" active-color="#6C5DD3" inactive-color="#84788C">
                </el-switch>
              </div>
              <div style="color: #999;font-size: 12px;" v-if="item.buyWay == 2 && item.businessId">到期时间：{{ item.closeTime
                }}</div>
            </div>
            <div class="flex" style="align-items: center; justify-content: space-between;">
              <div style="color: #6c5dd3">
                <span style="color: #24A813;" v-if="item.buyWay == 1">免费</span>
                <span v-if="item.buyWay == 2">{{ item.monthAmount }}虞豆/月</span>
                <span v-if="item.buyWay == 3">{{ item.monthAmount }}虞豆/长期</span>
              </div>
              <div>
                <el-button v-if="!item.businessId" size="small" type="primary" plain @click="kaitong(item)"
                  v-loading="loading">立即开通</el-button>
                <el-button
                  v-if="(item.buyWay == 2 && item.businessId) || (item.buyWay != 2 && item.businessId == 5492 && item.state != 1)"
                  size="small" type="primary" @click="submitForm(item)" v-loading="loading">立即续费</el-button>

              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="footer" v-if="menuGroupList && menuGroupList.length && serviceList && isTwo">
      <div class="footer-titles">
        商城服务
      </div>
      <div class="grid">
        <div class="grid-item" v-for="(item, i) in menuGroupList" :key="i" v-if="item.category == 2">
          <!-- 是否到期 -->

          <img v-if="item.state == 1 && dayNum(item.closeTime) < 5" class="footer-img"
            src="@/assets/img/shop/open-timer.png" alt="">
          <img v-else-if="item.state == 1" class="footer-img" src="@/assets/img/shop/open.png" alt="">
          <img v-else-if="item.state == 2 && item.closeTime " class="footer-img" src="@/assets/img/shop/no-open.png" alt="">

          <div><img :src="item.titleImg || 'https://imgage.maimaihao.com/yuduhulian/zanwu.png'" alt=""></div>
          <div class="grid-cont">
            <div class="tips dess" v-if="(item.shuoming && item.shuoming.length <= 41)">
              {{ item.shuoming }}
            </div>
            <div class="tips dess" v-else-if="item.shuoming">
              <el-tooltip :content="item.shuoming" placement="top-start">
                <span>
                  {{ item.shuoming.slice(0, 41) + '...' }}
                </span>
              </el-tooltip>
            </div>
            <div class="tips dess" v-else>暂无说明</div>
            <div class="flex" style="justify-content: space-between;margin-bottom: 6px;height: 18px;">
              <div class="auto"
                v-if="((item.buyWay == 2) || (item.buyWay != 2 && item.businessId == 5492 && item.state != 1)) && item.businessId">
                <span style="font-size: 12px;color: #6c5dd3;">自动续费：</span><el-switch class="el-switch-autos"
                  @change="editAuto($event, item)" :disabled="nowDate == item.closeTime" v-model="item.isAuto"
                  :active-value="1" :inactive-value="2" active-color="#6C5DD3" inactive-color="#84788C">
                </el-switch>
              </div>
              <div style="color: #999;font-size: 12px;" v-if="item.buyWay == 2 && item.businessId">到期时间：{{ item.closeTime
                }}</div>
            </div>
            <div class="flex" style="align-items: center; justify-content: space-between;">
              <div style="color: #6c5dd3">
                <span style="color: #24A813;" v-if="item.buyWay == 1">免费</span>
                <span v-if="item.buyWay == 2">{{ item.monthAmount }}虞豆/月</span>
                <span v-if="item.buyWay == 3">{{ item.monthAmount }}虞豆/长期</span>
              </div>
              <div>


                <el-button v-if="!item.businessId" size="small" type="primary" plain @click="kaitong(item)"
                  v-loading="loading">立即开通</el-button>
                <el-button
                  v-if="(item.buyWay == 2 && item.businessId) || (item.buyWay != 2 && item.businessId == 5492 && item.state != 1)"
                  size="small" type="primary" @click="submitForm(item)" v-loading="loading">立即续费</el-button>
                <el-button plain style="background-color: #24A81333;border-color: #24A81333;color: #24A813;"
                  v-else-if="item.buyWay != 2 && item.businessId" size="small" type="primary" disabled>正在使用</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="footer" v-if="menuGroupList && menuGroupList.length && serviceList && isThree">
      <div class="footer-titles">
        其他服务
      </div>
      <div class="grid">
        <div class="grid-item" v-for="(item, i) in menuGroupList" :key="i" v-if="!item.category">
          <!-- 是否到期 -->
       <img v-if="item.state == 1 && dayNum(item.closeTime) < 5" class="footer-img"
            src="@/assets/img/shop/open-timer.png" alt="">
          <img v-else-if="item.state == 1" class="footer-img" src="@/assets/img/shop/open.png" alt="">
          <img v-else-if="item.state == 2 && item.closeTime " class="footer-img" src="@/assets/img/shop/no-open.png" alt="">
          <div><img :src="item.titleImg || 'https://imgage.maimaihao.com/yuduhulian/zanwu.png'" alt=""></div>
          <div class="grid-cont">
            <div class="tips dess" v-if="(item.shuoming && item.shuoming.length <= 41)">
              {{ item.shuoming }}
            </div>
            <div class="tips dess" v-else-if="item.shuoming">
              <el-tooltip :content="item.shuoming" placement="top-start">
                <span>
                  {{ item.shuoming.slice(0, 41) + '...' }}
                </span>
              </el-tooltip>
            </div>
            <div class="tips dess" v-else>暂无说明</div>
            <div class="flex" style="justify-content: space-between;margin-bottom: 6px;height: 18px;">
              <div class="auto"
                v-if="((item.buyWay == 2) || (item.buyWay != 2 && item.businessId == 5492 && item.state != 1)) && item.businessId">
                <span style="font-size: 12px;color: #6c5dd3;">自动续费：</span><el-switch class="el-switch-autos"
                  @change="editAuto($event, item)" :disabled="nowDate == item.closeTime" v-model="item.isAuto"
                  :active-value="1" :inactive-value="2" active-color="#6C5DD3" inactive-color="#84788C">
                </el-switch>
              </div>
              <div style="color: #999;font-size: 12px;" v-if="item.buyWay == 2 && item.businessId">到期时间：{{ item.closeTime
                }}</div>
            </div>
            <div class="flex" style="align-items: center; justify-content: space-between;">
              <div style="color: #6c5dd3">
                <span style="color: #24A813;" v-if="item.buyWay == 1">免费</span>
                <span v-if="item.buyWay == 2">{{ item.monthAmount }}虞豆/月</span>
                <span v-if="item.buyWay == 3">{{ item.monthAmount }}虞豆/长期</span>
              </div>
              <div>


                <el-button v-if="!item.businessId" size="small" type="primary" plain @click="kaitong(item)"
                  v-loading="loading">立即开通</el-button>
                <el-button
                  v-if="(item.buyWay == 2 && item.businessId) || (item.buyWay != 2 && item.businessId == 5492 && item.state != 1)"
                  size="small" type="primary" @click="submitForm(item)" v-loading="loading">立即续费</el-button>
                <el-button plain style="background-color: #24A81333;border-color: #24A81333;color: #24A813;"
                  v-else-if="item.buyWay != 2 && item.businessId" size="small" type="primary" disabled>正在使用</el-button>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
    <moduleOpenDialog v-if="shopInfo && shopInfo.tenantId" :tenantId="shopInfo.tenantId"
      :campNumber="shopInfo.campNumber" ref="moduleOpenDialog" @success="init"></moduleOpenDialog>
    <!-- <payQrcode ref="payQrcode" @checkOrderInterval="checkOrderInterval" @checkOrder="checkOrder"></payQrcode> -->
    <shopMonth ref="shopMonthRef" @success="init"></shopMonth>
  </div>
</template>

<script>

import moneyApi from "@/api/financeCenter/myMoney";
import payApi from "@/api/financeCenter/pay";
import { menuGroupList } from "@/api/system/menuGroup.js";
import tabBar from "@/components/tenant/tabBar.vue";
import valueAddedServices from "@/api/shanghuduan/valueAddedServices";
import { formatDate } from "@/utils/index";
import { GetPcfnList } from "@/api/IntroductionPartners/index";
// 开通弹窗
import moduleOpenDialog from "../../../components/tenant/moduleOpenDialog.vue";
import shopMonth from "./components/shopMonth.vue"
import { mapGetters } from "vuex";

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "Jifenshangcheng",
  components: {
    tabBar,
    moduleOpenDialog,
    vueSeamlessScroll,
    shopMonth
    // payQrcode
  },
  data() {
    return {
      tabActive: "1",
      loading: false,

      allCheck: false,
      serviceList: null,
      isOne: false,
      isTwo: false,
      isThree: false,
      // 查询参数
      queryParams: {
        closeTimeStart: "",
        closeTimeEnd: "",
        dataType: "all",
        type: "1",
      },
      nowDate: "",

      menuGroupList: [],
      plantformList: null, //所有的接口渠道平台
      myServiceList: null, //已开通的接口服务

      // swiperOptions: {
      //   loop: true, // 循环模式选项
      //   slidesPerView: 15,
      //   speed: 500,
      //   autoplay: {
      //     delay: 0, // 自动切换时间间隔
      //     disableOnInteraction: true, // 用户操作后是否继续自动切换
      //   },
      //   pagination: false,
      //   navigation: false,
      // },
      defaultOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 15, // 开始无缝滚动的数据量，根据dataList.length设置
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下，1向上，2向左，3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度（默认值0是无缝不停止的滚动），direction=>0/1
        singleWidth: 0, // 单步运动停止的宽度（默认值0是无缝不停止的滚动），direction=>2/3
        waitTime: 0, // 单步运动停止的时间（默认值1000ms）
      },
      slides: [],
      totalNum: 500,

      tenantData: {
        shopServer: 1,
        baseServer: 1,
        baseExpireTime: '',
        shopExpireTime: ''
      },
      orderId: '',
      shopServerMoney: 0,
      baseServerMoney: 0,
      byfwList: []
    };
  },

  created() {
    let date = new Date();
    this.nowDate = formatDate(date).slice(0, 10);
    this.init();

    this.tenantData = this.shopInfo
    //  this.getTenant()
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapGetters(["shopInfo"]),
    dayNum() {
      return (val) => {
        let date = Date.parse(new Date(val)) / 1000;
        var today = Date.parse(new Date()) / 1000; //当前时间戳
        var nTime = date - today;
        var day = Math.floor(nTime / 86400) + 1;
        return day;
      };
    },
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        name: "Gongnengxiangqing",
        query: {
          groupId: item.groupId,
        },
      });
    },
    init() {

      this.getmenuGroupList();
      this.getslidesList();
      this.getDicts('byfw').then(r => {
        if (r.data && r.data.length) {
          r.data.forEach(item => {
            if (item.dictLabel == 'shopServer') {
              this.shopServerMoney = item.dictValue
            }
            if (item.dictLabel == 'baseServer') {
              this.baseServerMoney = item.dictValue
            }
          })
          this.byfwList = r.data,
            console.log(this.byfwList)
        }
      })
    },
    getTenant() {
      // moneyApi.getTenant(this.userInfo.tenantId).then(res=> {
      //   this.tenantData = res.data
      // 基础服务状态: 1-未开通, 2-已开通 baseServer
      //商城服务状态: 1-未开通, 2-已开通  shopServer
      // 基础包到期时间  baseExpireTime
      //商城包到期时间  shopExpireTime
      // })
    },
    // 获取所有的菜单分组（功能模块）
    getmenuGroupList() {
      this.loading = true;
      menuGroupList({ status: 0 }).then((response) => {
        this.menuGroupList = response.rows;
        // this.total = response.total;
        this.getMyService(
          this.shopInfo && this.shopInfo.tenantId ? this.shopInfo.tenantId : 1
        );
        this.loading = false;
      });
    },
    // 获取合作商家
    async getslidesList() {
      const res = await GetPcfnList({ type: 2 });
      this.slides = res.rows;
      if (this.slides && this.slides.length) {
        this.totalNum = this.slides[this.slides.length - 1].sort;
      }
    },

    // 开通功能模块服务
    kaitong(item) {
      let type = 1;
      if (item.serveType) type = item.serveType;
      this.$refs.moduleOpenDialog.open(item, 1, type);
    },

    // 获取租户开通的增值服务
    getMyService(tenantId) {
      // if()
      this.queryParams.tenantId = tenantId;
      valueAddedServices
        .myValueAddedServiceList(this.queryParams)
        .then((res) => {
          if (res.rows && res.rows.length) {
            this.serviceList = res.rows;
          } else {
            this.serviceList = [];
          }
          this.mergeServices();
        });
    },
    // 合并获取到的已开通服务和全部服务列表
    mergeServices() {
      if (this.serviceList && this.serviceList.length) {
        if (this.tabActive == 1) {
          this.menuGroupList.forEach((r1, i1) => {

            this.serviceList.forEach((r2) => {
              if (r1.category == 1) {
                this.isOne = true
              } else if (r1.category == 2) {
                this.isTwo = true
              } else {
                this.isThree = true
              }
              if (r1.groupId == r2.businessId) {
                this.menuGroupList[i1] = { ...r1, ...r2 };
              }
            });
          });
        } else if (this.tabActive == 2) {
          this.myServiceList = this.serviceList;
          this.plantformList.forEach((r1, i1) => {
            let cont = 0;
            if (r1.channelType == 2) {
              r1.isHide = true;
            }
            this.serviceList.forEach((r2, i2) => {
              if (r1.id == r2.businessId) {
                cont++;
                this.plantformList[i1] = { ...r1, ...r2 };
                this.myServiceList[i2] = { ...r1, ...r2 };
              }
            });
            if (cont) {
              this.plantformList[i1].cont = cont;
            }
          });
        }
      } else {
        if (this.tabActive == 2) {
          this.plantformList.forEach((r1, i1) => {
            if (r1.channelType == 2) {
              r1.isHide = true;
            }
          });
        }
      }
      this.$forceUpdate();
    },
    // 改变自动续费状态
    editAuto(e, item) {
      valueAddedServices.myValueAddedServiceChangeAuto(item).then((res) => {
        this.getMyService();
      });
    },
    submitForm(item) {
      console.log("%c Line:389 🍿 item", "color:#3f7cff", item);
      let type = 1;
      if (item.serveType) {
        type = item.serveType;
        item.groupId = item.businessId;
      }
      this.$refs.moduleOpenDialog.open(item, 2, type);
    },
    // // 全选
    // selectAll(e) {
    //   if (e) {
    //     this.serviceList.forEach((r) => {
    //       r.checked = true;
    //     });
    //   } else {
    //     this.serviceList.forEach((r) => {
    //       r.checked = false;
    //     });
    //   }
    // },

    lianxi(id) {
      this.$refs.contactServer.open(id);
    },

    foundation() {
      const foundItem = this.byfwList.find(item => item.dictLabel === 'baseServer');
      this.$refs.shopMonthRef.open('基础服务包', 'baseServer', foundItem.dictValue || 0);
      // moneyApi
      //           .addBzj({
      //             orderType: 3,
      //             amount:0.01,
      //           })
      //           .then(async (res) => {
      //             this.orderId = res.data.id;
      //              await this.payNow(res.data.id);
      //             this.loading = false;
      //           });
    },
    shopChange() {
      const foundItem = this.byfwList.find(item => item.dictLabel === 'shopServer');

      this.$refs.shopMonthRef.open('自营商城包', 'shopServer', foundItem.dictValue || 0);
      // moneyApi.addBzj({
      //             orderType: 4,
      //             amount:0.01,
      //           })
      //           .then(async (res) => {
      //             this.orderId = res.data.id;
      //              await this.payNow(res.data.id);
      //             this.loading = false;
      //           });
    },
    // 请求支付参数
    async payNow(id) {
      let obj = {
        id: id,
        payWay: 2,
        payScene: 3,
        qrPayMode: 4,
        goodsTitle: "基础服务包开通",
      };
      const res1 = await payApi.userPayOrderRecordPayment(obj);
      //console.log(res1);
      if (res1.code === 200) {
        const isHuifu = res1.data.isHuifu || 1
        this.$refs.payQrcode.open(2, res1.data.formStr, isHuifu)
      }
    },


    // 轮询订单支付结果
    checkOrderInterval() {
      moneyApi.payBzjStateInterval({ id: this.orderId }).then((res) => {
        if (res.code == 200) {
          if (res.data.pay_status == 2) {
            this.$store.dispatch("getShopInfo");
            this.$refs.payQrcode.showSuccess(
              "余额",
              "充值成功！"
            );
            this.$refs.payQrcode.close();
            this.dialogVisible = false;
          }
        }
      });
    },
    // 查询订单状态
    checkOrder() {
      moneyApi
        .payBzjStateHander({
          id: this.orderId,
        })
        .then((res) => {
          if (res.code == 200) {
            if (res.data.payStatus == 2) {
              this.$store.dispatch("getShopInfo");
              this.$refs.payQrcode.showSuccess(
                "余额",
                "充值成功！"
              );
              this.$refs.payQrcode.close();
              this.dialogVisible = false;
            } else {
              this.$message.waring("未查询到支付结果！如有问题请联系客服");
            }
          }
        });
    },
  },
};
</script>
<style scoped lang="scss">
.server_box {
  max-width: 100%;
  padding: 10px;
  border-radius: 6px;

  .shangjia_box {
    width: 100%;
    height: 145px;

    border-radius: 4px;
    padding: 15px;

    .shangjia_num {
      width: 267px;
      flex-shrink: 0;
      background: #ffffff;
      border-radius: 10px;
      text-align: center;
      padding-top: 20px;

      div:nth-of-type(1) {
        font-size: 18px;
      }

      div:nth-of-type(2) {
        font-size: 32px;
        color: #6c5dd3;
        margin-top: 10px;
      }
    }
  }

  .shangjia_list {
    width: 100%;
    overflow: hidden;
    padding-top: 15px;

    .warp {
      padding-bottom: 15px;
      overflow: hidden;
    }

    .systemNotice {
      width: 100%;

      .new-system {
        min-width: 130px;
        max-width: 190px;
        align-items: center;
        padding: 4px;
        height: 100%;
        background: #F4F5FA;
        border-radius: 10px;
        margin-left: 12px;

        .ew-system-des {
          font-size: 16px;
          height: 24px; // 固定高度，防止撑开
          line-height: 24px;
        }
      }
    }

    img {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-right: 10px;
    }
  }

  .service-box {
    min-height: calc(100vh - 200px);
    margin-top: 10px;

    .content {
      flex-wrap: wrap;
    }

    .service-item {
      width: 500px;
      background: #ffffff;
      box-shadow: 0px 0px 4px 1px rgba(200, 200, 200, 0.5);
      border-radius: 4px;
      margin: 0 10px 10px 0;
      position: relative;
      overflow: hidden;
      padding: 15px;

      .top {
        justify-content: space-between;
        position: relative;

        .sign {
          position: absolute;
          left: -15px;
          top: -15px;
          font-size: 12px;
          color: #fff;
          padding: 3px 15px;
          background-color: red;
          border-radius: 10px 0 0 0;
        }

        .name {
          align-items: center;

          img {
            width: 48px;
            height: 48px;
            margin-right: 10px;
          }

          .name_time {
            font-size: 16px;
            align-items: center;

            .endtime {
              font-size: 12px;
              color: #999;
              margin-left: 10px;
            }
          }

          .tip {
            width: 280px;
            font-weight: 500;
            font-size: 14px;
            color: #666666;
            line-height: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 2px;
          }
        }

        .price_box {
          width: 160px;
          text-align: right;
          color: #6c5dd3;

          .pricename {
            color: #999;
          }
        }
      }

      .img_des_box {
        margin-top: 10px;

        img {
          width: 230px;
          height: 200px;
          flex-shrink: 0;
        }

        .des_box {
          margin-left: 10px;

          .des_box_top {
            background: #f7f7f7;
            padding: 8px;
            width: 230px;
            height: 159px;

            .yikainum {
              font-weight: 600;
              font-size: 14px;
              color: #6c5dd3;
            }


          }
        }

        .btns {
          text-align: center;
          padding: 10px 0;
        }
      }

      // .tip {
      //   margin-top: 10px;
      // }
      // .sign {
      //   position: absolute;
      //   top: 0;
      //   right: 0;
      //   font-size: 12px;
      //   color: #24a813;
      //   padding: 3px 15px;
      //   background-color: #fff;
      //   border-radius: 0 0 0 10px;
      // }
      // &.jjdq {
      //   border: 1px solid #eb8200;
      //   .top {
      //     background-color: #fab562;
      //   }
      //   .sign {
      //     color: #eb8200;
      //   }
      // }
      // &.dq {
      //   border: 1px solid #da6565;
      //   .top {
      //     background-color: #da6565;
      //   }
      //   .sign {
      //     color: #da6565;
      //   }
      // }
      // &.wkt {
      //   border: 1px solid #b5b5b5;
      //   .top {
      //     background-color: #b5b5b5;
      //   }
      //   .sign {
      //     color: #b5b5b5;
      //   }
      // }
    }
  }
}



.nav-bg {
  background: #fff;
  border-radius: 10px;
  color: #000;
  font-size: 16px;
  // font-weight: 600;

  b {
    color: #6C5DD3;
    font-size: 20px;
    margin-left: 2px;
    vertical-align: middle;
  }
}

.footer {
  background: #FFFFFF;
  width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  padding: 16px;

  .footer-titles {
    font-size: 16px;
    margin-bottom: 20px;
    color: #000000;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    grid-auto-flow: row;
    /* 默认值，可以省略 */
    gap: 14px;

    .grid-item {
      border: 1px solid #E8E8E8;
      border-radius: 10px;
      position: relative;

      .grid-cont {
        padding: 8px;
      }
    }

    .tips {
      font-size: 14px;
      color: #8F92A1;
      margin-bottom: 8px;
    }

    .grid-item-tips {
      font-size: 12px;
      margin-left: 8px;
      color: #84788C;
    }

    img {
      border-radius: 10px 10px 0 0;
      width: 100%;
      // height: 157px;
      object-fit: cover;

    }
  }
}

.dess {
  height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 5px;
  font-size: 14px;
  color: #999999;
  line-height: 17px;
}

.new-btn {
  background: rgba(108, 93, 211, 0.1);
  border: 1px solid #6C5DD3;
  color: #6C5DD3;
  border-radius: 4px;
}

.el-switch-autos {
  transform: scale(0.6);
  margin-left: -10px;
}


.activate-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  gap: 15px;
  /* 使用gap代替margin，更好地适应不同屏幕 */

  .activate-box-left {
    flex: 1;
    min-width: 300px;
    /* 设置最小宽度，防止在小屏幕上过窄 */
    padding: 16px 20px 30px 16px;
    /* 减少右侧padding，使内容更紧凑 */
    position: relative;
    border-radius: 10px;
    background: url('../../../assets/img/shop/left-bg-1.png') no-repeat center;
    background-size: cover;
    /* 使用cover代替100% 100%，更好地适应不同尺寸 */
  }

  .activate-box-right {
    flex: 1;
    min-width: 300px;
    /* 设置最小宽度，防止在小屏幕上过窄 */
    padding: 16px 20px 30px 16px;
    /* 统一左右两边的padding */
    background: url('../../../assets/img/shop/right-bg.png') no-repeat center;
    background-size: cover;
    /* 使用cover代替100% 100%，更好地适应不同尺寸 */
  }

  /* 在小屏幕上调整布局 */
  @media screen and (max-width: 768px) {
    flex-direction: column;

    .activate-box-left,
    .activate-box-right {
      width: 100%;
      margin-right: 0;
      margin-bottom: 15px;
    }
  }

  .left-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .flex {
    margin-top: 10px;
    position: relative;
    z-index: 2;
    align-items: center;

    @media screen and (max-width: 576px) {
      flex-direction: column;
      /* 在小屏幕上改为纵向排列 */
    }
  }

  .flex-l {
    flex: 1;

    @media screen and (max-width: 576px) {
      width: 100%;
      /* 在小屏幕上占满宽度 */
      margin-bottom: 10px;
    }
  }

  .flex-r {
    // flex:0 0 23%;
    margin-right: 12px;
    >div {
      display: flex;
      flex-direction: column;
      /* 改为纵向排列，适应小屏幕 */
      align-items: flex-end;
      /* 右对齐 */
    }

    /* 在小屏幕上调整布局 */
    @media screen and (max-width: 576px) {
      margin-left: 0;
      margin-top: 15px;
      width: 100%;

      >div {
        align-items: center;
        /* 在小屏幕上居中对齐 */
        width: 100%;
      }
    }
  }

  .left-bg-st {
    position: absolute;
    width: 82px;
    height: 71px;
    right: 0;
    top: 0;
  }

  .title {
    font-size: 16px;
    color: #000000;
  }

  .money {
    font-size: 14px;
    font-weight: 500;
    color: #6C5DD3;
    margin: 0 4px;
  }

  .timer {
    color: #F09200;
    font-size: 12px;
    font-weight: 400;
  }

  .grids {
  
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 120px));
    /* 使用auto-fit和minmax实现响应式布局 */
    gap: 10px;
    /* 减小间距，适应小屏幕 */

    .grids-item {
      text-align: center;
      padding: 10px 5px;
      /* 减小padding，适应小屏幕 */
      border-radius: 6px;
      border: 1px solid rgba(132, 120, 140, 0.2);
      display: flex;

      align-items: center;
      justify-content: center;

      img {
        margin-right: 2px;
        width: 20px;
        height: 20px;
      }

      span {
        font-weight: 500;
        font-size: 14px;
        /* 减小字体大小，适应小屏幕 */
        color: #574A5F;
        white-space: nowrap;
        /* 防止文字换行 */
      }
    }
  }

  .grids-r {
   
    /* 减少右侧margin */
    grid-template-columns: repeat(auto-fit, minmax(110px, 130px));
    /* 使用auto-fit和minmax实现响应式布局 */
  }

  /* 在小屏幕上调整网格布局 */
  @media screen and (max-width: 576px) {

    .grids,
    .grids-r {
      grid-template-columns: repeat(2, 1fr);
      /* 在非常小的屏幕上，每行只显示2个项目 */
      margin-right: 0;
    }
  }

  .flex-r-p {
    max-width: 100%;
    /* 限制最大宽度为容器宽度 */
    height: auto;
    /* 高度自适应 */
    width: 167px;
  }

  .flex-r-r-p {
    max-width: 100%;
    /* 限制最大宽度为容器宽度 */
    height: auto;
    /* 高度自适应 */
    width: 346px;

    @media screen and (max-width: 576px) {
      width: 100%;
      /* 在小屏幕上占满宽度 */
    }
  }

  .flex-r-b {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }

  .flex-btn {
    width: 110px;
    border-radius: 6px;
    margin-top: 8px;
    background: #6C5DD3;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
    /* 防止文字换行 */

    @media screen and (max-width: 576px) {
      width: 80%;
      /* 在小屏幕上占据更大宽度 */
      max-width: 200px;
    }
  }
}

.footer-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 64px !important;
  height: 25px !important;
  border-radius: 0 !important;
}

.titles {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 18px;
}

.flex-r-cont {
  width: 100%;
  font-weight: 500;
  text-align: right;
  .title-one {
    font-size: 22px;
    color: #676098;
  }
  .title-two  {
    font-size: 16px;
    color: #676098;
  }
  .title-three {
    margin-top: 4px;
  }
  .title-three,.title-four {
   
    color: #666;
    font-size: 14px;
    span{
      color: #676098;
      font-size: 15px;
      text-decoration: underline;

    }
  }
  .title-four {
    span {
      font-size: 16px;
      color: #666;
      font-weight: 500;
      text-decoration:none;
    }
  }
}
</style>
